<template>


    <div class="routine_detail" ref="Essay_ref">
        <div class="tips">
            <div>
                <img @click="goTop" style="width: 5vw;" :src="base_url + '/assets/svg/gotop.svg'" alt="">

            </div>
            <div>
                <img @click="goBottom" style="width: 3vw;" :src="base_url + '/assets/svg/gobottom.svg'" alt="">

            </div>
        </div>
        <div class="infos">
            <div class="title">
                <img :src="base_url + '/assets/svg/Routine_Detail/person.svg'" style="width: 3vw;" alt="">
                <span>{{ detail?.title }}</span>
            </div>
            <div class="cover_img">
                <el-image style="width: 100%;height: 15vw;" :src="base_url + detail?.cover_img" fit="fill"
                    :lazy="true"></el-image>
                <div class="item">最后编辑时间{{ detail?.end_time }}</div>
            </div>
            <div class="e_c_l">

                <div class="item">
                    <img :src="base_url + '/assets/svg/home/routine/eye.svg'" alt="">
                    <span>{{ detail?.browse }}浏览</span>
                </div>
                <div class="item">
                    <img :src="base_url + '/assets/svg/home/routine/comment.svg'" alt="">
                    <span>{{ detail?.review }}评论</span>
                </div>
                <div class="item">
                    <img :src="base_url + '/assets/svg/home/routine/likes.svg'" alt="">
                    <span>{{ detail?.likes?.length }}点赞</span>
                </div>
            </div>
        </div>
        <div class="content">
            <Editor style="width: 100%;" v-model="valueHtml" :mode="mode" @onCreated="handleCreated" />
        </div>
        <div class="comment" v-if="discussList.length !== 0">
            <Com_item v-for="item in discussList" :key="item._id" :item="item"></Com_item>
        </div>


        <div class="send">
            <div class="top">
                <img :src="base_url + '/assets/svg/Editing.svg'" alt="">
                <span>发布一条</span>
                <el-tag v-if="replay_name" closable type="warning" effect="dark" @close="close_item">
                    回复:{{ replay_name }}
                </el-tag>
            </div>
            <div class="data">
                <el-input v-model="textarea" :rows="5" type="textarea" placeholder="留下你的痕迹...." />
                <el-button style="width: 20%;margin-top: 1vw;font-size: 1vw;" type="primary" size="default"
                    @click="up_disscuss" plain>提交</el-button>

            </div>
        </div>

    </div>
</template>

<script setup lang="ts">
import Com_item from "@/components/Comment_item/Com_item.vue";
import { useRoute } from "vue-router"
//@ts-ignore
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { onMounted, shallowRef, ref, nextTick, reactive, watch } from "vue"
import { type Eassay_detaile } from '@/types/Eassy'
import { Get_essaay_detail, add_discuss_count } from "@/apis/web/WebApi"
import { format } from "@/utils/formatTime"
import { add_discuss, get_discuss } from '@/apis/web/DiscussApi';
import { type Discuss } from '@/types/Discuss';
import { user_info } from "@/utils/Local"
import { ElMessage } from "element-plus";
import DiscussStore from "@/store/DiscussStore";
const Essay_ref = ref()
const store = DiscussStore()
const replay_name = ref("")
const Common_user = user_info.Get_info()
const base_url = import.meta.env.VITE_APP_URL
const textarea = ref('')
const route = useRoute()
const discussList = ref<any>([])
const discussInfor = reactive<Discuss>({
    article_id: route.params.id as string,
    user_id: Common_user._id,
    comment_text: '',
    comment_date: Date.now(),
    parent_comment_id: '',
    dis_type: "essay"
})
const valueHtml = ref('<p>hello</p>')
const editorRef = shallowRef()
const handleCreated = (editor: any) => {
    editorRef.value = editor
    editorRef.value.disable()
}
const mode = ref("default")
const detail = ref<Eassay_detaile>()
onMounted(() => {
    getDetail()
    getDiscuss()
})

watch(store.will_reply, () => {
    replay_name.value = store.will_reply.username
    discussInfor.parent_comment_id = store.will_reply.parent_comment_id

    Essay_ref.value?.scrollTo({ top: Essay_ref.value.scrollHeight, behavior: "smooth" });

})
const getDetail = async () => {
    const result: any = await Get_essaay_detail(route.params.id as string)
    console.log(result, '详细')
    result.data.end_time = format.formatDate(result.data.end_time)
    detail.value = result.data
    console.log(detail.value?.end_time)
    nextTick(() => {
        console.log(detail.value?.rich_text)
        editorRef.value.setHtml(detail.value?.rich_text)
    })
}
const getDiscuss = async () => {
    const result = await get_discuss(route.params.id as string)
    console.log(result)
    discussList.value = result.data
}

const up_disscuss = async () => {
    if (!user_info.Get_info()) {
        ElMessage({
            type: "warning",
            message: "登录后发布"
        })
        return
    }
    const current_id = user_info.Get_info()._id

    if (textarea.value.trim() === '') {
        ElMessage({
            type: "error",
            message: "请输入内容"
        })
        return
    }
    discussInfor.comment_text = textarea.value
    discussInfor.comment_date = Date.now()
    discussInfor.user_id = current_id
    discussInfor.dis_type = 'essay'
    const result: any = await add_discuss(discussInfor)

    if (result.code == 200) {
        add_discuss_count(discussInfor.article_id)
        Object.assign(discussInfor, {
            comment_text: '',
            comment_date: Date.now(),
            parent_comment_id: ''
        })
        ElMessage({
            type: "success",
            message: "评论成功"
        })
        textarea.value = ''
        getDiscuss()
    } else {
        ElMessage({
            type: "error",
            message: "评论失败"
        })
        Object.assign(discussInfor, {
            comment_text: '',
            comment_date: Date.now(),
            parent_comment_id: ''
        })
        textarea.value = ''
    }
}
//关闭回复
const close_item = () => {
    store.will_reply.username = ''
    store.will_reply.parent_comment_id = ''
    discussInfor.user_id = Common_user._id
    discussInfor.parent_comment_id = ''
    replay_name.value = ''
}
//回到顶部
const goTop = () => {
    Essay_ref.value?.scrollTo({ top: 0, behavior: "smooth" });
}
const goBottom = () => {
    Essay_ref.value?.scrollTo({ top: Essay_ref.value.scrollHeight, behavior: "smooth" });
}
</script>

<style scoped lang="scss">
.routine_detail {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 90vh;
    overflow-y: scroll;

    :deep(.w-e-text-container) {
        background-color: transparent;
    }

    .tips {
        position: absolute;
        right: 15vw;
        bottom: 0;
        display: flex;
        flex-direction: column;
        align-items: center;

        div {
            margin-bottom: 1vw;
        }
    }

    .infos {
        margin-top: 1vw;
        width: 50%;
        background-color: #27AE60;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;

        .cover_img {
            position: relative;
            overflow: hidden;


            :deep(.el-image):hover {
                transform: scale(1.5);
            }

            :deep(.el-image) {
                transition: all 1s;
            }

            .item {
                position: absolute;
                bottom: 0;
                text-align: right;
                background-color: rgba(0, 0, 0, 0.5);
                width: 100%;
                padding: 1vw;
                color: #F1FAEE
            }
        }

        .title {
            display: flex;
            align-items: center;

            justify-content: center;
            font-size: 1.5vw;
            font-weight: bold;
        }

        .e_c_l {
            box-sizing: border-box;
            padding: 1vw;
            display: flex;
            justify-content: flex-end;

            .item {
                display: flex;
                align-items: center;
                margin-right: 2vw;

                img {
                    width: 2vw;
                }

                span {
                    font-size: 1vw;
                }
            }
        }
    }

    .swiper {
        width: 80%;

        .el-carousel__item h3 {
            color: #475669;
            opacity: 0.75;
            line-height: 200px;
            margin: 0;
            text-align: center;
        }

        .el-carousel__item:nth-child(2n) {
            background-color: #99a9bf;
        }

        .el-carousel__item:nth-child(2n + 1) {
            background-color: #d3dce6;
        }
    }

    .content {
        width: 50%;
        background-color: rgba(255, 255, 255, 0.8);
        padding: 0.5vw;
        font-size: 1vw;
        box-sizing: border-box;
    }

    .comment {
        width: 50%;
        background-color: #eee;
        margin-top: 2vw;
        padding: 0.5vw;
        box-sizing: border-box;
    }

    .send {
        margin-top: 1vw;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 10vh;


        .top {
            width: 50%;
            display: flex;
            align-items: center;
            background-color: #F1FAEE;
            border-bottom: 2px dashed orange;

            img {
                width: 8%;
            }

            span {
                margin-left: 1vw;
                font-size: 1vw;
            }
        }

        .data {
            width: 50%;
            background-color: #F1FAEE;
            padding: 1vw;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            align-items: center;
            border-bottom-right-radius: 10px;
            border-bottom-left-radius: 10px;
            overflow: hidden;

            .el-input {
                width: 100%;
                font-size: 1vw;

            }
        }
    }
}
</style>